<template>
	<!-- 搭配师方案主页 -->
	<!-- loading -->
	<view class="mask" v-if="loading">
		<view class="preloader">
			<view class="loader"></view>
		</view>
	</view>

	<view class="content" id="listArea" v-else>
		<u-modal v-model="deleteShow" @confirm="deleteImgConfirm" ref="uModal" :async-close="true" title="提示" content="确定要删除该方案吗"
		 :show-cancel-button="true"></u-modal>

		<!-- <u-popup mode="bottom" v-model="shareVisible" :border-radius="36" :closeable="false">
			<view class="bottomSheet_content">
				<button class="u-cell" open-type="share" style="background: transparent;margin: 0 !important;line-height: 1.2;">
					分享
				</button>
				<view class="u-cell" hover-class="opacity7" @click="$u.throttle(deleteWearPlan, 500)">
					删除
				</view>
				<view class="u-cell" hover-class="opacity7" @click="shareVisible = false">
					取消
				</view>
			</view>
		</u-popup> -->

		<view class="onorder" v-if="list.length===0">
			<image src="../../static/img/noorder.png"></image>
			<view class="text">
				暂无穿搭方案
			</view>
		</view>
		<u-row gutter="16" justify="space-between" v-else>
			<u-col span="6" v-for="(item, index) in list">
				<view class="demo-layout bg-purple-light" @click="watchDetail(item)">
					<view class="top_area">
						<view>{{ item.remark }}</view>
					</view>
					<view class="image_area">
						<view class="tag">
							<u-tag v-if="item.schemeStatus === 0" type="error" text="制作中" mode="dark" />
						</view>
						<image :src="item.content[0][0].photo" mode="aspectFit"></image>
					</view>
					<view class="info_area">
						<text class="info">{{ item.content[0][0].introduce }}</text>
					</view>
					<view class="aciton">
						<view class="label_text">
							<image :src="item.stylist.headphoto" mode="aspectFit" style="width: 40upx;height: 40upx;border-radius: 50%;"></image>
							<span class="label_text2">{{ item.stylist.nickname }}</span>
						</view>
						<view @click.stop.prevent="taptext($event, item)">
							<u-icon name="more-dot-fill" color="#555555" size="35"></u-icon>
						</view>
					</view>
				</view>
				<MdPopups v-model="shareVisible" :shareData="shareData" :triangle="false" placement="top-end" :popData="optionsData" @tapPopup="tapPopup" :x="x" :y="y" direction="row" theme="dark" dynamic>
				</MdPopups>
			</u-col>
		</u-row>
		
		<previewImage ref="previewImage" :opacity="0.8" :wearData="shareData" :imgs="imgs" :descs="descs" @longPress="longPress"
		 @changeData="changeData"></previewImage>

		<u-loadmore :status="status" @loadmore="moreData" />
	</view>
</template>

<script>
	import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue';
	import {
		isBlank
	} from '@/utils/common.js'
	import {
		mapState
	} from 'vuex';
	import MdPopups from "@/components/MdPopups/MdPopups";
	import { mixin } from "@/mixins/wearPlan.js"

	export default {
		computed: {
			...mapState(['userInfo'])
		},
		components: {
			previewImage
		},
		mixins:[mixin], //混入文件
		data() {
			return {
				loading: false,
				screenHeight: 0, //屏幕高度
				bottomDistinct: 200, //距离底部多少像素时触发
				status: 'loadmore',
				queryForm: {
					pageNum: 1,
					pageSize: 10
				},
				pageNum: 1,
				pageSize: 10,
				list: [],
				deleteShow: false,
				// 方案预览
				// 更多操作
				x: 0,
				y: 0,
				shareVisible: false,
				optionsData: [{
					icon: '/pagesB/static/img/wearPlan/share.png',
					title: '分享'
				}, {
					icon: '/pagesB/static/img/wearPlan/delect.png',
					title: '删除'
				}]
			}
		},
		onLoad() {
			this.findSchemeByUserId()
		},
		onReady() {
			//页面加载时取得屏幕高度
			this.screenHeight = uni.getSystemInfoSync().screenHeight;
		},
		onPullDownRefresh() {
			this.queryForm = {
				pageNum: 1,
				pageSize: 10
			}
			this.status = "loadmore"
			this.findSchemeByUserId()
		},
		onReachBottom(e) {
			if (this.status === 'loadmore') {
				this.moreData()
			}
		},
		methods: {
			isBlank,
			// 查询我的穿搭方案
			findSchemeByUserId() {
				this.loading = true
				this.$u.api.findSchemeByUserId(this.queryForm).then(res => {
					this.loading = false
					if (res.code === 200) {
						uni.stopPullDownRefresh()
						this.list = res.data.records
						for (let i in this.list) {
							this.list[i].content = JSON.parse(this.list[i].content)
							for (let j in this.list[i].content) {
								this.list[i].content[j][0].photo = "https://posting.imguangguang.com/" + this.list[i].content[j][0].photo // 兼容APP只取第一張
							}
						}
					}
				})
			},
			moreData() {
				this.status = 'loading';
				this.queryForm.pageNum++;

				this.$u.api.findSchemeByUserId(this.queryForm).then(res => {
					if (res.code === 200) {
						this.list = this.list.concat(res.data.records)
						if (this.list.length < res.data.total) {
							this.status = 'loadmore'
						} else {
							this.status = 'nomore'
						}
					}
				})
			},
			shareWearPlan(data) {
				this.shareData = data
				this.shareVisible = true
			},
			// 删除穿搭方案
			deleteWearPlan() {
				this.shareVisible = false
				this.deleteShow = true
			},
			deleteImgConfirm() {
				var data = {
					id: this.shareData.id
				}
				this.$u.api.delScheme(data).then(res => {
					this.deleteShow = false
					if (res.code === 200) {
						uni.showToast({
							icon: "none",
							title: "删除成功"
						})
						this.findSchemeByUserId()
					}
				})
			},
			// 打开方案(编辑修改)
			watchDetail(item) {
				this.shareData = item
				this.imgs = []
				this.descs = []
				for (let i in item.content) {
					this.imgs.push(item.content[i][0].photo)
					this.descs.push(item.content[i][0].introduce)
				}
				this.$refs.previewImage.open(0); // 传入当前选中的图片地址或序号
			},
			// 展示
			taptext(e, data){
				this.x = e.touches[0].clientX
				this.y = e.touches[0].clientY
				this.shareData = data
				this.shareVisible = true
			},
			// 点击更多
			tapPopup(e){
				this.shareVisible = false
				
				switch (e.title){
					case '删除':
						this.deleteWearPlan()
						break;
					default:
						break;
				}
			},
		},

	}
</script>

<style lang="scss">
	@import "@/static/css/loading.scss";

	page {
		position: relative;
		background-color: #F7F8FA;
		height: 100%;
	}

	.content {
		padding: 32upx 30upx;

		// 无方案数据
		.onorder {
			width: 100%;
			height: 50vw;
			display: flex;
			justify-content: center;
			align-content: center;
			flex-wrap: wrap;

			image {
				width: 20vw;
				height: 20vw;
				border-radius: 100%;
			}

			.text {
				width: 100%;
				height: 60upx;
				font-size: 28upx;
				color: #444;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}


	.demo-layout {
		margin-bottom: 20upx;
		border-radius: 8upx;
		display: flex;
		flex-direction: column;

		.top_area {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 16upx 0;
			font-size: 28upx;
			font-weight: bold;
			color: #333333;

			image {
				width: 30upx;
				height: 28upx;
				margin-left: 8upx;
			}
		}

		.image_area {
			width: 100%;
			height: 340upx;
			position: relative;

			.tag {
				position: absolute;
				left: 0;
				bottom: 0;
			}

			image {
				width: 100%;
				height: 100%;
			}
		}

		.info_area {
			padding: 8upx;
			height: 62upx;

			.info {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				font-size: 22upx;
				color: #666666;
			}
		}

		.aciton {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 4upx 8upx 19upx 8upx;

			.label_text {
				display: flex;
				align-items: center;
			}

			.label_text2 {
				padding-left: 12upx;
				color: #333333;
				font-size: 22upx;
				font-weight: bold;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				font-size: 22upx;
			}
		}
	}


	.wrap_text {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 12upx 0 25upx 0;
		color: #666666;
		font-size: 26upx;
	}

	.bg-purple-light {
		background: white;
	}

	.btn {
		position: fixed;
		height: 90upx;
		width: 690upx;
		line-height: 90upx;
		bottom: 49upx;
	}

	// 弹窗样式
	.bottomSheet_content {
		padding: 0 35upx 0 35upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.title {
			margin: 46upx auto 32upx auto;
			text-align: center;
			font-size: 32upx;
			font-weight: bold;
			color: #333333;
		}

		.content {
			font-size: 22upx;
			font-weight: 400;
			color: #333333;
		}

		.u-cell {
			text-align: center;
			border-top: 1px solid #D8D8D8;
			padding: 28upx;
			font-size: 32upx;
			color: #333333;
			font-weight: bold;
		}
	}
</style>
